<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>pop move</title>
<!--random moving image on click-->
<!--
This program should make an image move to a random
location within a div onclick or mouseover - and try
to keep track of some kind of accumulated value.
-->

</head>
<body style="font-family:Arial;background-color:#fff;">

<div id="wrap" style=" width:600px;height:400px;background-color:#888;padding:0px;margin:auto;border:1px solid #333;overflow:hidden;">
<img id="box0" style="height:72px;width:72px;position:relative;top:20px;left:100px" src="box0.png" onclick="moveBox();"/>
</div>

<div id="notes" style=" width:580px;height:30px;background-color:#c84;margin:auto;padding:10px;border:1px solid #333;color:#fdb;">
greetings earthling
</div>

<script src="transforms.js"></script>
<script type="text/javascript">

//2strokeMotor@gmail.com

var growDur   = 900;
var shrinkDur = 500;

var wrap   = document.getElementById('wrap');
var notes  = document.getElementById('notes');
var box0   = document.getElementById('box0');

var boxS   = box0.style;
var boxT   = parseInt(boxS.top);
var boxL   = parseInt(boxS.left);
var boxW   = box0.offsetWidth;
var boxH   = box0.offsetHeight;
var boxW2  = Math.round(boxW/2);
var boxH2  = Math.round(boxH/2);
var boxIsNotAnimating = true;

var migs    = [new Image(),new Image()];
migs[0].src = 'box0.png';
migs[1].src = 'box1.png';

var wrapH  = parseInt(wrap.style.height) - boxH;
var wrapW  = parseInt(wrap.style.width ) - boxW;

var count  = 0;

xforms = new transforms();

var moveBox = function(){
	if(boxIsNotAnimating){
		notes.innerHTML = 'Score: '+ ++count;
		boxIsNotAnimating = false;
		shrinkBox(+new Date,shrinkDur);
		return false;
	}else{
		return false;
	}
}

var shrinkBox = function(start, dur){
	var per = ((+new Date)-start)/dur;
	if(per >= 1){
		// ~~ is the same as Math.floor for 0 < vals < 2^31
		boxT  = ~~(Math.random()*wrapH);
		boxL  = ~~(Math.random()*wrapW);
		box0.src = migs[(box0.src.indexOf(0)>0)?1:0].src;
		growBox(+new Date, growDur);
	}else{
		placeBox(xforms.popOut(per,1.2,.3));
		//placeBox(xforms.wiggle(per,2));
		setTimeout(function(){shrinkBox(start,dur)},0);
	}
	

}

var growBox = function(start, dur){
	var per = ((+new Date)-start)/dur;
	if(per >= 1){

		boxS.top  = boxT + 'px';
		boxS.left = boxL + 'px';
		boxIsNotAnimating = true;

	}else{
		placeBox(xforms.popIn(per,1.2,.3));
		setTimeout(function(){growBox(start, dur)},0);
	}
	
}

var placeBox = function(p){

	// So then,  ~~ + .5 works like Math.round()

	var popH = ~~(.5 + p*boxH);
	var popW = ~~(.5 + p*boxW);

	boxS.top    = ~~(boxT + boxH2 - popH/2) + 'px';
	boxS.left   = ~~(boxL + boxW2 - popW/2) + 'px';
	boxS.height = popH + 'px';
	boxS.width  = popW + 'px';

	// not sure if it's faster to do it in one line
	// but you can set box0.style.cssText to one long string
	//box0.style.cssText += '...';

}


</script>


</body>
</html>
